<template>
	<view>
		<view></view>

		<!-- start：搜索框 用的是fixed定位-->
		<view class="header-avatar-search">
			<u-row>
				<u-col :span="2.5">
					<u-tag :text="userInfo.nickname" mode="dark" />
				</u-col>
				<u-col :span="6">
					<u-search style="width: 400rpx;" @change="searchChange()" @search="search()" @custom="search()"
						:animation="true" v-model="searchValue" placeholder="请输入单子名称或编号"></u-search>
				</u-col>
			</u-row>
		</view>
		<!-- end：搜索框 -->

		<!-- start：头部导航 用的是fixed定位-->
		<u-tabs :padding="0" class="header-tab" :list="headerNavList" :is-scroll="false" :current="current"
			@change="change"></u-tabs>
		<!-- end：头部导航 -->

		<!-- 用来产生边距 -->
		<view style="margin-top: 120rpx;margin-bottom: 250rpx;"></view>

		<!-- start：页面块框 -->
		<view v-for="item in pageData" @click="toPage('show/show?id='+item.id)"
			style="padding: 20rpx;margin-bottom: 20rpx;background-color: #489fff;box-shadow: 0 4rpx 10rpx #489fff;border-radius: 20rpx;width: 80%;margin-left: 50%;transform: translateX(-50%);">
			<view style="height: 20rpx;"></view>
			<view style="color:rgba(255,255,255,.8);font-weight: bold;text-align: center;">{{item.title}}</view>
			<view style="height: 60rpx;"></view>

			<view
				style="height: 50rpx;position: absolute;bottom: 10rpx;right:20rpx;font-size: 25rpx;color:rgba(255,255,255,.6)">
				{{item.gmtCreate}}
			</view>
		</view>
		<!-- end：页面块框 -->

		<view style="height: 100rpx;"></view>
		<button class="chlr" @click="toPage('./add/add')">添加</button>

		<b-tabbar icon-size="55rpx" :list="list" inactive-color="rgba(255,255,255,.7)"
			active-color="rgba(255,255,255,1)" style="font-size: 50rpx;" />

	</view>
</template>

<script>
	import bTabbar from '../../js/bTabbar.js';
	import Request from '../../utils/Request.js';
	import Util from '../../utils/Util.js';
	
	var that;
	let list = bTabbar.getTabbarList();
	export default {
		data() {
			return {
				list: list,
				searchValue: "",
				userInfo: {
					nickname:""
				},
				deptInfo: {},
				searchDisabled: false,
				pageData: [
					{
						title:"做一个旅游管理平台",
						gmtCreate:"2021-06-06 11:32:31"
					}
				],
				headerNavList: [{
						name: '未接单'
					},
					{
						name: '已接单'
					},
					{
						name: '全部'
					}
				],
				current: 0,
			}
		},
		onShow: function() {
			this.getUserInfo();
			this.findInAuthz();
		},
		mounted() {
			that = this;
			this.getUserInfo();
			this.findInAuthz();
		},
		methods: {
			getUserInfo() {
				Util.request({
					url: Request.path+"ces-user/get_user_info",
					success(res) {
						that.userInfo = res.data.data;
					}
				});
			},
			change(index) {
				this.current = index;
			},
			toPage(path) {
				uni.navigateTo({
					url: path
				})
			},
			/**
			 * 根据头部导航栏的选择来更改显示页面数据
			 */
			toTag(arr) {
				var hash = [];

				//头部导航在“商机策划”时
				if (this.current == 0) {
					for (var i = 0; i < arr.length; i++) {
						if (
							arr[i].state == 0 || //未评估	
							arr[i].state == 1 || //未审核评估
							arr[i].state == 2 || //评估审核已通过
							arr[i].state == -2 //评估审核未通过
						) {
							hash.push(arr[i]);
						}
					}
					this.pageData = hash;
					return;
				}

				//头部导航在“立项”时
				if (this.current == 1) {
					for (var i = 0; i < arr.length; i++) {
						if (arr[i].state >= 3 || arr[i].state <= -3) { // 
							hash.push(arr[i]);
						}
					}
					this.pageData = hash;
					return;
				}

				//头部导航在“全部”时
				if (this.current == 2) {

					for (var i = 0; i < arr.length; i++) {
						hash.push(arr[i]);
					}
					this.pageData = hash;
					return;
				}
			},

			/**
			 * 查询自己权限可以查看到的所有商机
			 */
			findInAuthz() {
				uni.request({
					url: Request.shangjiFindInAuthz,
					header: {
						"session": uni.getStorageSync("SESSION")
					},
					method: "GET",
					success(res) {
						that.toTag(res.data.data);

						for (var i = 0; i < that.pageData.length; i++) {
							//给所有数字状态赋予文字
							that.pageData[i].stateName = that.stateToText(that.pageData[i].state);
						}
						that.search();
					}
				});
			},

			search() {
				var pageData = JSON.parse(JSON.stringify(this.pageData));
				this.pageData = [];
				for (var i = 0; i < pageData.length; i++) {
					console.log(that.searchValue);
					if (pageData[i].projectName.indexOf(that.searchValue) != -1) {
						this.pageData.push(pageData[i]);
					}
				}
			},
			async searchChange() {
				this.findInAuthz();
			}
		},
		watch: {
			current(newVal, oldVal) {
				this.findInAuthz();
			}
		}
	}
</script>

<style>
	.header-avatar-search {
		position: fixed;
		padding-top: 50rpx;
		top: 0rpx;
		width: 100%;
		height: 85rpx;
		padding-left: 20rpx;
		z-index: 120;
		background-color: #FFFFFF;
	}

	.header-tab {
		position: fixed;
		width: 100%;
		top: 120rpx;
		z-index: 100;
		box-shadow: 0 10rpx 10rpx #3c86e6a2;
	}

	.u-card-wrap {
		background-color: $u-bg-color;
		padding: 1px;
	}

	.u-body-item {
		font-size: 32rpx;
		color: #333;
		padding: 20rpx 10rpx;
	}

	.u-body-item image {
		width: 120rpx;
		flex: 0 0 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
		margin-left: 12rpx;
	}


	.chlr {
		position: fixed;
		background: linear-gradient(145deg, #489fff, #3c86e6);
		color: #fff;
		width: 300rpx;
		bottom: 140rpx;
		z-index: 200;
		left: 50%;
		transform: translateX(-50%);
		font-size: 25rpx;
		border-radius: 30rpx;
		box-shadow: 0 6rpx 10rpx #3C86E6;
	}

	.chlr:active {
		background: linear-gradient(145deg, #3c86e6, #489fff);
		box-shadow: 0 0rpx 10rpx #3C86E6;
	}
</style>
